<!-- 订单详情 -->
<template>
	<view class="pages ">
		<!-- 订单信息 -->
		<view class="order-info bgc-w p-30 mb-20  pt-20 pb-20">
			<view class="title fc-3 fw-9 fs-lg">
				订单信息
			</view>

			<!-- 商品信息 -->
			<view class="goods-ifon" :class="{'ac-goods-info':openGoods}">
				<p-order-goods-item-sm class="mt-20 mb-20" v-for="(item,index) in 5" :key="index" :info="{}" />
				<view class="goods-ifon-mack"></view>
			</view>

			<view class="row-box">
				<view class="">
					共 <text class="fc-warn ml-10 mr-10">39</text> 种 <text class="fc-warn ml-20 mr-10">39</text>
					件
				</view>
				<view class="">
					实收：<text class="fs-lg fw-9 fc-ac">¥37.00</text>
				</view>
			</view>

			<view class="open-goods fc-0 fcc mt-20" @click="openGoods=!openGoods">
				{{openGoods?'收起':'打开'}}
				<text class="iconfont fc-0 ml-10" :class="{'iconfont-top':openGoods}">&#xe685;</text>
			</view>

			<u-divider text=""></u-divider>

			<view class="row-box  pt-20 pb-20" v-for="(item ,index) in orderInfo" :key="index">
				<view class=" order-list-title fc-9 mr-20">
					{{item.title}}
				</view>
				<view class="fc-0">
					{{item.value}}
				</view>
			</view>
		</view>
		<!-- 客户信息 -->
		<p-customer-info></p-customer-info>
		<!-- 技术支持 -->
		<p-support class=""></p-support>
		<!-- 底部操作区 -->
		<view class="order-item-bottom bgc-w p-30 flex align-items-center justify-content-end">
			<view class="btn-info-sm ml-10" @click="inStore">
				已到店
			</view>
			<view class="btn-info-green-sm ml-10" @click="onUse">
				提醒使用
			</view>
			<view class="btn-info-green-sm ml-10" @click="verification">
				核销
			</view>
			<view class="btn-info-green-sm ml-10" @click="storeVerification">
				到店核销
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openGoods: true
			};
		},
		methods: {
			// 核销
			verification() {
				console.log('verification')
			},
			// 提醒使用
			onUse() {
				console.log('onUse')
			},
			// 到店核销
			storeVerification() {
				console.log('storeVerification')
			},
			// 已到店
			inStore() {
				console.log('inStore')
			}
		},
		computed: {
			verificationInfo() {
				return [{
					title: "核销门店",
					value: "莱山万科御龙山店"
				}, {
					title: "核销人员",
					value: "祥龙"
				}, {
					title: "核销收益",
					value: "+0.30元"
				}, {
					title: "核销时间",
					value: "2025/03/14 15:05:29"
				}, ]
			},
			orderInfo() {
				return [{
					title: "订单编号",
					value: "202503115764754465",
					icon: ''
				}, {
					title: "下单时间",
					value: "2025/03/12 00:00:00"
				}, {
					title: "支付时间",
					value: "2025/03/12 00:00:00"
				}, {
					title: "提货时间",
					value: "2025/03/12 00:00:00"
				}, {
					title: "订单备注",
					value: "需要给我提供一个购物袋装起来"
				}, ]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages-top {
		padding: 96rpx 0 40rpx;

		.details-img {
			width: 260rpx;
			height: 260rpx;
		}
	}

	.order-list-title {
		min-width: 100rpx;
		flex-shrink: 0;
	}

	.goods-ifon {
		height: 300rpx;
		position: relative;
		overflow: hidden;

		.goods-ifon-mack {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			background-image: linear-gradient(0deg, #fff, rgba(0, 0, 0, 0));
			z-index: 1;
			opacity: 1;
		}
	}

	.ac-goods-info {
		height: auto;

		.goods-ifon-mack {
			opacity: 0;
		}
	}

	.open-goods {
		height: 55rpx;
		flex-direction: row;

		.iconfont {
			transform: rotate(0deg);
			transition: all 0.3s;
		}

		.iconfont-top {
			transform: rotate(180deg);
			transition: all 0.3s;
		}
	}



	.order-item-bottom {
		border-top: 1rpx solid #ededeb;

		.btn-info-sm {
			width: 144rpx;
			line-height: 56rpx;
			font-size: 28rpx;
			background-color: #FFF;
			border: 1rpx solid #666;
			color: #999;
		}

		.btn-info-green-sm {
			width: 144rpx;
			line-height: 56rpx;
			font-size: 28rpx;
			background-color: #FFF;
			border: 1rpx solid #00A191;
			color: #00A191;
		}
	}
</style>